<template>
  <h1>管理人员管理</h1>
  <div class="box">
  <el-table :data="Ipeoplelist" style="width: 100%">
    <el-table-column prop="adminid" label="管理员编号"/>
    <el-table-column prop="adminname" label="姓名" />
    <el-table-column prop=" role" label="角色" >
      <template #default="scope">
        <span>{{ scope.row.role == 1 ? "超级管理员" : "普通管理员" }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" >
      <template #default="scope">
        <el-popconfirm
          title="亲，您真的要删除吗?"
          @confirm="deletelist(scope.row.adminid)"
        >
          <template #reference>
            <el-button type="danger" :icon="Delete" circle />
           
          </template>
        </el-popconfirm>
      

        <el-button size="small" type="primary" :icon="Edit" round @click="modification(scope.row.adminname)">修改信息</el-button>
      </template>
    </el-table-column>
  </el-table>
  <Modification v-show="isShowEdit" @hide="hideFn" :adminname="editAdminName" @updatesuccess="successFn" ></Modification>
  </div>
</template>

<script setup lang="ts">

import { ElMessage } from 'element-plus'
import service from "../../../utlis/service";
import { reactive,ref} from "vue";
import  Modification   from './Modification.vue'

import "element-plus/es/components/notification/style/css"
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
interface Ipeople {
  adminname: string;
  password: string;
  role: number;
  adminid: string;
}
const ElNotification:any=reactive([])
//获取管理人员列表
let Ipeoplelist = reactive<Ipeople[]>([]);
const getlist = () => {
  service({
    url: "admin/list",
  }).then((res) => {
    if (res.data.code === "200") {
      Ipeoplelist.push(...res.data.data);
      
    }
  });
};
getlist();
//删除管理员
const deletelist = (adminid: string) => {
  service({
    url: "admin/delete",
    method: "post",
    data: {
      adminid,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      getlist();
      location.reload();
      ElNotification({
          title: "查询成功",
          type: "success",
        })
      
      
      
    }
  });
};
//设置保存相关的数据
const isShowEdit=ref(false);//控制修改组件的显示隐藏
const editAdminName=ref("")//要修改的设置为空
const modification=(adminname:string)=>{
  editAdminName.value=adminname;
  isShowEdit.value=true;
}
const hideFn=()=>{
  isShowEdit.value=false;
}
const successFn=()=>getlist();

</script>

<style scoped>
.box{
  margin-left: 20px;
}
</style>